﻿<%@ Page language="c#" validateRequest="false" Inherits="LocalBoard.Web.SeeBoard" CodeFile="SeeBoard.aspx.cs" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<title>LocalBoard - <%=(string.IsNullOrEmpty(CurrentBoard.Name) ? "Unknown" : CurrentBoard.Name)%></title>
		<script language="javascript" src="script/dhtml.js"></script>
		<link rel="stylesheet" type="text/css" href="yui/reset-fonts-grids/reset-fonts-grids.css" /> 
		<link rel="stylesheet" type="text/css" href="yui/base/base.css" /> 
		<link rel="stylesheet" type="text/css" href="yui/fonts/fonts-min.css" />
		<link rel="stylesheet" type="text/css" href="yui/container/assets/skins/sam/container.css" />
		<link rel="stylesheet" type="text/css" href="yui/menu/assets/skins/sam/menu.css" />
		<link rel="stylesheet" type="text/css" href="yui/button/assets/skins/sam/button.css" />
		<link rel="stylesheet" type="text/css" href="yui/autocomplete/assets/skins/sam/autocomplete.css" />
		<link rel="stylesheet" type="text/css" href="yui/editor/assets/skins/sam/editor.css" />
		
		<script type="text/javascript" src="yui/yahoo-dom-event/yahoo-dom-event.js"></script>
		<script type="text/javascript" src="yui/connection/connection.js"></script>
		<script type="text/javascript" src="yui/dragdrop/dragdrop.js"></script>
		<script type="text/javascript" src="yui/container/container.js"></script>
		<script type="text/javascript" src="yui/utilities/utilities.js"></script>
		<script type="text/javascript" src="yui/menu/menu.js"></script>
		<script type="text/javascript" src="yui/button/button-beta.js"></script>
		<script type="text/javascript" src="yui/autocomplete/autocomplete.js"></script>
		<script type="text/javascript" src="yui/editor/editor-beta.js"></script>
		<style type="text/css">
    #content {
        border: 1px solid black;
        margin: .25em;
        float: left;
        width: 950px;
        height: 500px;
        overflow: auto;
    }
    /* 
     * Part of workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=167801 
     */
    .caretfix {
       overflow:auto;
    }
		.yui-editor-container { 
			position: absolute; 
			top: -9999px; 
			left: -9999px; 
			z-index: 999; /* So Safari behaves */ 
		} 
		#editor { 
			visibility: hidden; 
			position: absolute; 
		} 
		.editable { 
	    border: 1px solid black; 
	    margin: .25em; 
	    float: left; 
	    width: 350px; 
	    height: 100px; 
		} 
.yui-skin-sam .yui-panel .hd {

    background: #F2F2F2;
    
}

.yui-skin-sam .yui-panel-container.focused .yui-panel .hd {

    background: url(yui/assets/skins/sam/sprite.png) repeat-x 0 -200px;

}
		</style>
  </head>
	<body class=" yui-skin-sam">
		<form id="board" method="post" runat="server">
<!-- the id on the containing div determines the page width. -->
<!-- #doc = 750px; #doc2 = 950px; #doc3 = 100%; #doc4 = 974px -->

<!-- To set the Preset Template, add a class to the containing node -->
<!-- .yui-t1 = left 160px; .yui-t2 = left 180px; .yui-t3 = left 300px; -->
<!-- .yui-t4 = right 180px; .yui-t5 = right 240px; .yui-t6 = right 300px; -->

<div id="doc2">					
	<div id="hd">
	</div>

	<div id="bd">
<h1 class="first-content"><%=(string.IsNullOrEmpty(CurrentBoard.Name) ? "Unknown" : CurrentBoard.Name)%></h1>
<div>
	<button type="button" id="post" name="post" value="Post New">Post New</button>
</div>
<div id="content">
<asp:Repeater ID="loadedContent" runat="server" EnableViewState="False">
<ItemTemplate>
<div id="post:<%#Eval("Id")%>" x="<%#Eval("X")%>" y="<%#Eval("Y")%>" z="<%#Eval("Z")%>" class="post">
<div class="bd"><%#Eval("Body")%>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
	</div>

	<div id="ft">
	</div>
</div>
<textarea id="editor"></textarea>
<script>
var Dom = YAHOO.util.Dom,
		Event = YAHOO.util.Event;
var LOCALBOARD = {};
LOCALBOARD.SeeBoard = {};

function init() {
	var panelConfig = {visible:false, constraintoviewport:true, width:"300px"};
	LOCALBOARD.SeeBoard.overlayManager = new YAHOO.widget.OverlayManager(); 
	var ar = Dom.getElementsByClassName("post", "div", "content");
	Dom.batch(ar, function(elem) {
		createNewPanel(elem, panelConfig);
	});
	
	function createNewPanel(elem, config, header, body, isNew, xx, yy, zz) {
		var panel = null;
		
		if(elem.attributes) {
			var x = parseFloat(elem.attributes["x"].value);
			var y = parseFloat(elem.attributes["y"].value);
			var z = parseFloat(elem.attributes["z"].value);
			panel = new YAHOO.widget.Panel(elem, config);
			panel.moveTo(x,y);
			panel.cfg.setProperty("zIndex", z);
		} else {
			panel = new YAHOO.widget.Panel(elem, config);
			panel.setHeader(header);
			panel.setBody(body);
			panel.moveTo(xx,yy);
			panel.cfg.setProperty("zIndex", zz);
		}
		panel.moveEvent.subscribe(function(type, xy) {msgPropertyChanged(type, xy, this);});
		panel.hideEvent.subscribe(function() {
				var split = this.id.split(':');
				var msgId;
				if(split && split.length >= 2)
					msgId = split[1];
				if(msgId) {
					//TODO: Confirmation dialog box
					deleteMessage(msgId);
				}
			});
		Event.addListener(panel.element, "dblclick", function(e, obj) {showEditor(panel);}, panel, true);
		
		panel.render("content");
		LOCALBOARD.SeeBoard.overlayManager.register(panel);
		panel.show();
	};

	function deleteMessage(msgId) {
		var postData = "msgid=" + msgId;
		YAHOO.util.Connect.asyncRequest('POST', "DeleteMessage.aspx", 
			{ 
				success: function(o){},
				failure: function(o){
					YAHOO.log("The failure handler was called.  tId: " + o.tId + ".", "info", "example");

					if(o.responseText !== undefined){
						var error = "<p><li>Transaction id: " + o.tId + "</li>";
						error += "<li>HTTP status: " + o.status + "</li>";
						error += "<li>Status code message: " + o.statusText + "</li>";
						error += "<li>Error: </li>";
						error += "<p>" + o.responseText + "</p>";
						error += "<li>Message Id: " + msgId + "</li>";
						error += "<li>Posted Data: </li></p>";
						error += "<p>" + postData + "</p>";
						LOCALBOARD.SeeBoard.simpledialog1.element.style.overflow = "auto";
						LOCALBOARD.SeeBoard.simpledialog1.setBody("<p>Message posting failed!</p>" + error);
						LOCALBOARD.SeeBoard.simpledialog1.show();
					}
				}, 
				argument: [],
				cache: false,
				timeout: 3000
			}, 
			postData
		);//asyncRequest
	}
	
	function msgPropertyChanged(type, args, obj) {
		var msg = {};
		switch(type) {
			case "zIndex":
				break;
			case "move":
				msg.x = args[0][0];
				msg.y = args[0][1];
				msg.z = obj.cfg.getProperty("zIndex");
				break;
			case "body":
				msg.body = args;
				break;
			default:
				break;
		}
		LOCALBOARD.SeeBoard.myEditor.postMsg(obj.id, msg);
	}
	
	function updateMsg(msgId, msg) {
		var postData = "board=<%=BoardController.BoardId%>&msgid=" + msgId
									+ (msg.body ? "&body=" + escape(msg.body) : "")
									+ (msg.x ? "&x=" + msg.x : "")
									+ (msg.y ? "&y=" + msg.y : "")
									+ (msg.z ? "&z=" + msg.z : "");

		YAHOO.util.Connect.asyncRequest('POST', "post.aspx", 
			{ 
				success: function(o){ 
					if(o.responseText !== undefined){ 
						if(parseFloat(o.responseText) > 0) {
							var newPanelId = "post:" + o.responseText;
							createNewPanel(newPanelId, panelConfig, "", msg.body, true, msg.x, msg.y, msg.z);
//							LOCALBOARD.SeeBoard.simpledialog1.setBody("New message has been posted!");
//							LOCALBOARD.SeeBoard.simpledialog1.show();
						}
					}
				}, 
				failure: function(o){
					YAHOO.log("The failure handler was called.  tId: " + o.tId + ".", "info", "example");

					if(o.responseText !== undefined){
						var error = "<p><li>Transaction id: " + o.tId + "</li>";
						error += "<li>HTTP status: " + o.status + "</li>";
						error += "<li>Status code message: " + o.statusText + "</li>";
						error += "<li>Error: </li>";
						error += "<p>" + o.responseText + "</p>";
						error += "<li>Message Id: " + msgId + "</li>";
						error += "<li>Posted Data: </li></p>";
						error += "<p>" + postData + "</p>";
						LOCALBOARD.SeeBoard.simpledialog1.element.style.overflow = "auto";
						LOCALBOARD.SeeBoard.simpledialog1.setBody("<p>Message posting failed!</p>" + error);
						LOCALBOARD.SeeBoard.simpledialog1.show();
					}
				}, 
				argument: [],
				cache: false,
				timeout: 3000
			}, 
			postData
		);//asyncRequest
		return true;
	}
	
	var editorConfig = {
			visible:false,
			height: '300px',
			width: '515px',
			animate: true,
			dompath: true,
			panel: true
	};
	LOCALBOARD.SeeBoard.myEditor = new YAHOO.widget.Editor('editor', editorConfig);
	LOCALBOARD.SeeBoard.myEditor.on('toolbarLoaded', function() { 
		this.toolbar.on('toolbarCollapsed', function() { 
			Dom.removeClass(this.toolbar.get('cont').parentNode, 'yui-toolbar-container-collapsed');
			saveMessage();	
		}, LOCALBOARD.SeeBoard.myEditor, true); 
	}, LOCALBOARD.SeeBoard.myEditor, true); 
	LOCALBOARD.SeeBoard.myEditor.render("content");
	
	// Instantiate the Dialog
	LOCALBOARD.SeeBoard.simpledialog1 = new YAHOO.widget.SimpleDialog("simpledialog1", 
																			 { width: "300px",
																			   height: "200px",
																			   fixedcenter: true,
																			   visible: false,
																			   draggable: false,
																			   close: true,
																			   constraintoviewport: true,
																			   icon: YAHOO.widget.SimpleDialog.ICON_ALARM,
																			   buttons: [ { text:"Ok", handler:function() {
		this.hide();
	}, isDefault:true } ]
																			 } );
	LOCALBOARD.SeeBoard.simpledialog1.setHeader("Post Result");
	LOCALBOARD.SeeBoard.simpledialog1.render("content");

	LOCALBOARD.SeeBoard.myEditor.postMsg = function(id, msg) {
		var msgId = null;
		if(id) {
			var split = id.split(':');
			if(split && split.length >= 2)
				msgId = split[1];
			else {
				LOCALBOARD.SeeBoard.simpledialog1.setHeader("Argument Exception!");
				LOCALBOARD.SeeBoard.simpledialog1.setBody("Message id is invalid");
				LOCALBOARD.SeeBoard.simpledialog1.show();
				return false;
			}
		} else {
			msgId = "-1";		
		}
		return updateMsg(msgId, msg);
	};
//  if (YAHOO.env.ua.gecko) {
//    /* 
//     * Other part of workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=167801 !!?
//     * I have no explanation for why the new thread (setTimeout) is needed, but it is.
//     */
//    Dom.addClass(LOCALBOARD.SeeBoard.myEditor, "caretfix");

//    LOCALBOARD.SeeBoard.myEditor.showEvent.subscribe(function() {
//        Dom.setStyle(LOCALBOARD.SeeBoard.myEditor, "display", "none");

//        var fixDisplay = function() {
//            Dom.setStyle(LOCALBOARD.SeeBoard.myEditor, "display", "block");
//            try {
////                LOCALBOARD.SeeBoard.myEditor.firstFormElement.focus();
//            } catch (e) {
//                // Not related to the workaround, I just try/catch focus calls
//                // do avoid testing for the various conditions in which they could
//                // fail.
//            }
//        }
//        setTimeout(fixDisplay, 0);
//    });
//  }
	LOCALBOARD.SeeBoard.myEditor.init = function(panelId, body) {
		LOCALBOARD.SeeBoard.myEditor.revisingPanelId = panelId;
		LOCALBOARD.SeeBoard.myEditor.setEditorHTML(body);
	};
  
  function saveMessage() {
		Dom.setXY(LOCALBOARD.SeeBoard.myEditor.get('element_cont').get('element'), [-99999, -99999]);
		LOCALBOARD.SeeBoard.myEditor.saveHTML();
		var msg = {};
		msg.body = LOCALBOARD.SeeBoard.myEditor.get('textarea').value;
		if(LOCALBOARD.SeeBoard.myEditor.revisingPanelId) {
			var result = LOCALBOARD.SeeBoard.myEditor.postMsg(LOCALBOARD.SeeBoard.myEditor.revisingPanelId, msg);
			if(result) {
				var revisingPanel = LOCALBOARD.SeeBoard.overlayManager.find(LOCALBOARD.SeeBoard.myEditor.revisingPanelId);
				if(revisingPanel)
					revisingPanel.setBody(msg.body);
			}
		} else {
			if(msg.body && msg.body.length > 0) {
				LOCALBOARD.SeeBoard.myEditor.postMsg(null, msg);
			}
		}
		LOCALBOARD.SeeBoard.myEditor.hide();
	}
	
  function showEditor(p_oEvent) {
    if (p_oEvent) {
      var xy = p_oEvent.cfg.getProperty("xy");
			var ar = Dom.getElementsByClassName("bd", "div", p_oEvent.id);
			if(ar && ar[0])
				LOCALBOARD.SeeBoard.myEditor.init(p_oEvent.id, ar[0].innerHTML);
      Dom.setXY(LOCALBOARD.SeeBoard.myEditor.get('element_cont').get('element'), xy);
			LOCALBOARD.SeeBoard.myEditor.show();
    }
  }
  function showNewEditor(p_oEvent) {
		var xy = Dom.getXY("content");
		LOCALBOARD.SeeBoard.myEditor.init(null, "");
		Dom.setXY(LOCALBOARD.SeeBoard.myEditor.get('element_cont').get('element'), xy);
		LOCALBOARD.SeeBoard.myEditor.show();
	}
  LOCALBOARD.SeeBoard.postNewButton = new YAHOO.widget.Button("post", { onclick: { fn: showNewEditor } });
}

YAHOO.util.Event.onDOMReady(init);
</script>
		</form>
	</body>
</html>
